import Taro, { Component } from '@tarojs/taro'
import PropTypes from 'prop-types'
import { View, Text, Image } from '@tarojs/components'
import { AtIcon } from 'taro-ui'

import './index.less'

export default class VisitDoctorList extends Component {

  DoctorDetail(id) {
    Taro.navigateTo({
      url:`/pages/DoctorPage/index?id=`+ id
    })
  }
  AskingQuestions(doctor) {
    Taro.navigateTo({
      url:`/pages/AskQuestion/index?name=`+ doctor.name + '&department=' + doctor.department + '&hospital=' + doctor.hospital + '&headImage=' + doctor.headImage + '&doctorId=' + doctor.userId
    })
  }

  render() {
    const { data } = this.props
    return (
      <View>
        <View className='list' >
          {data.map(item => (
            <View className='list-item' key={item.id}>
              <View className='list-item-left' onClick={this.DoctorDetail.bind(this, item.userId)}>
                <Image className='list-item-left-image' src={item.headImage}/>
              </View>
              <View className='list-item-right'>
                <View className='list-item-title-box'>
                  <View className="list-item-title-left" onClick={this.DoctorDetail.bind(this, item.userId)}>
                    <View className='list-item-title magin-5'>
                      {item.name}
                      <Text className='list-item-subtitle'>{item.doctorTitle}</Text>
                    </View>
                    <View className='list-item-tips list-magin-5'>
                      {item.hospital}/{item.department}
                    </View>
                  </View>
                  <View className="list-item-title-right" onClick={this.AskingQuestions.bind(this,item)}>
                    <AtIcon prefixClass='icon' value='question' size='25' color='#ae58ed'></AtIcon>
                  </View>
                </View>
                <View className='list-item-content magin-bottom-30' onClick={this.DoctorDetail.bind(this, item.userId)}>
                  {item.description}
                </View>
              </View>
            </View>
          ))}
        </View>
      </View>
    )
  }
}

VisitDoctorList.propTypes = {
  data: PropTypes.array
}
